<template>
  <div class="back">
    <div id="main">
      <el-card class="box-card">
        <div slot="header" style="text-align: center" class="clearfix">
          <font size="20px" class="gradient-text-one">物业管理系统登录页面</font>
        </div>
        <el-tabs type="border-card">
          <el-tab-pane label="登录">
            <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="0px" class="login_form">
              <el-form-item prop="username">
                <el-input style="width: 80%;display:block;margin:0 auto" v-model="loginForm.username"
                          placeholder="请输入用户名称" prefix-icon="el-icon-user-solid"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input style="width: 80%;display:block;margin:0 auto" v-model="loginForm.password"
                          placeholder="请输入登录密码" prefix-icon="el-icon-lock"></el-input>
              </el-form-item>
              <el-form-item>
                <div class="login_btn">
                  <el-button style="width:60%;display:block;margin:0 auto" @click="loginn">登录</el-button>
                </div>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="注册">
            <el-form :model="RegForm" ref="RegForm" label-width="0px" class="login_form">
              <el-form-item>
                <el-input v-model="RegForm.username" placeholder="请输入用户名称" prefix-icon="el-icon-user-solid" @blur="selectusername"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="RegForm.password" placeholder="请输入用户密码" prefix-icon="el-icon-lock"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="RegForm.nickname" placeholder="请输入用户昵称" prefix-icon="el-icon-user-solid" @blur="selectnickname"></el-input>
              </el-form-item>
              <el-form-item>
                <font size="3px">性别: </font>
                <el-radio v-model="RegForm.sex" label="1">男</el-radio>
                <el-radio v-model="RegForm.sex" label="2">女</el-radio>
              </el-form-item>
              <el-form-item>
                <el-input v-model="RegForm.email" placeholder="请输入用户邮箱" prefix-icon="el-icon-user-solid"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="RegForm.phone" placeholder="请输入用户电话" prefix-icon="el-icon-user-solid"></el-input>
              </el-form-item>
              <el-form-item>
                <font size="3px">部门: </font>
                <el-radio v-model="radio" label="1">董事长</el-radio>
                <el-radio v-model="radio" label="2">经理部</el-radio>
                <el-radio v-model="radio" label="3">开发部</el-radio>
              </el-form-item>
              <el-form-item>
                <font size="3px">注册人员等级: </font>
                <el-radio v-model="RegForm.jueseid" label="2">财务管理</el-radio>
                <el-radio v-model="RegForm.jueseid" label="3">客服管理</el-radio>
                <el-radio v-model="RegForm.jueseid" label="4">工程管理</el-radio>
              </el-form-item>
              <el-form-item>
                <div class="login_btn">
                  <el-button style="width:60%;display:block;margin:0 auto" @click="reg" plain>注册</el-button>
                </div>
                <el-button type="text" @click="open">去登录</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      regstatus: '',
      regstatus1: '',
      radio: '',
      RegForm: {
        username: '',
        password: '',
        nickname: '',
        sex: '',
        email: '',
        phone: '',
        jueseid: ''
      },
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async selectnickname () {
      const { data: res } = await this.$axios.post('/selectnickname', {
        nickname: this.RegForm.nickname
      })
      if (res === true) {
        this.$notify({
          title: '昵称',
          message: '昵称合法',
          type: 'success'
        })
        this.regstatus1 = res
      } else if (res === false) {
        this.$notify({
          title: '失败',
          message: '昵称已存在',
          type: 'warning'
        })
        this.regstatus1 = res
      }
    },
    async selectusername () {
      const { data: res } = await this.$axios.post('/selectusername', {
        username: this.RegForm.username
      })
      if (res === true) {
        this.$notify({
          title: '用户名',
          message: '用户名合法',
          type: 'success'
        })
        this.regstatus = res
      } else if (res === false) {
        this.$notify({
          title: '失败',
          message: '用户名已经存在',
          type: 'warning'
        })
        this.regstatus = res
      }
    },
    async loginn () {
      const { data: res } = await this.$axios.post('/login', {
        username: this.loginForm.username,
        password: this.loginForm.password
      })
      console.log(res)
      if (res.success === false) {
        this.$message.error('用户名或密码错误')
      } else if (res.success === true && res.data.s.status === 0) {
        sessionStorage.setItem('token', res.data.s.token)
        sessionStorage.setItem('username', res.data.s.username)
        sessionStorage.setItem('nickname', res.data.s.nickname)
        sessionStorage.setItem('jueseid', res.data.s.jueseid)
        sessionStorage.setItem('phone', res.data.s.phone)
        sessionStorage.setItem('sex', res.data.s.sex)
        sessionStorage.setItem('password', res.data.s.password)
        sessionStorage.setItem('username', res.data.s.username)
        this.$router.push({ name: 'Main' })
      } else if (this.$route.query.redirect) {
        const redirect = this.$route.query.redirect
        this.$router.push(redirect)
      } else if (res.logg.status === 1) {
        this.$message({
          showClose: true,
          message: '该账号已经被禁用,请联系管理员',
          type: 'warning'
        })
      } else if (res.logg.status === 2) {
        this.$message({
          showClose: true,
          message: '该账号异常,请稍后再试'
        })
      }
    },
    async reg () {
      if (this.RegForm.username === '' || this.RegForm.password === '' || this.RegForm.nickname === '' || this.RegForm.sex === '' || this.RegForm.email === '' || this.RegForm.phone === '' || this.radio === '' || this.RegForm.jueseid === '' || this.regstatus === false || this.regstatus1 === false) {
        this.$notify.error({
          title: '错误',
          message: '信息填写有误'
        })
      } else {
        let { data: res } = await this.$axios.post('/reg', {
          username: this.RegForm.username,
          password: this.RegForm.password,
          nickname: this.RegForm.nickname,
          sex: this.RegForm.sex,
          email: this.RegForm.email,
          phone: this.RegForm.phone,
          deptid: this.radio,
          jueseid: this.RegForm.jueseid
        })
        console.log(res)
        // eslint-disable-next-line no-cond-assign,no-constant-condition
        if (res = true) {
          this.$notify({
            title: '成功',
            message: '恭喜您，注册成功',
            type: 'success'
          })
        }
      }
    },
    open () {
      const h = this.$createElement
      this.$msgbox({
        title: '消息',
        message: h('p', null, [
          h('span', null, '温馨提示 '),
          h('i', { style: 'color: teal' }, '注册才可以登录哦')
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '执行中...'
            setTimeout(() => {
              done()
              setTimeout(() => {
                instance.confirmButtonLoading = false
              }, 300)
            }, 2000)
          } else {
            done()
          }
        }
      }).then(action => {
        location.reload()
      })
    }
  }
}
</script>

<style scoped>
.login_btn {
  display: flex;
  justify-content: flex-end;
}

.gradient-text-one {
  background-image: -webkit-linear-gradient(bottom, aqua, darkturquoise, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.back {
  background-image: url('../assets/image/2.jpg');
  width: 100%;
  height: 100%;
  background-size: cover;
  opacity: 30;
  position: fixed;
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 600px;
  background-color: darkcyan;
}

#main {
  position: absolute;
  width: 400px;
  height: 200px;
  left: 45%;
  top: 15%;
  margin-left: -200px;
  margin-top: -100px;
  background-color: antiquewhite;
}
</style>
